<template>
  <div class="container" >
    <div class="sure-accident-type">
        <div class="content">
            <i-cell title="出险人" v-model="EmpName"></i-cell>
            <i-cell title="事故时间" v-model="claimInfo.F_CaseDate"></i-cell>
            <i-cell title="事故地址" v-model="claimInfo.F_CaseAddress"></i-cell>
            <!-- <i-cell title="事故类型" v-model="claimInfo.F_CaseType"></i-cell> -->
            <!-- <div class="i-cell i-input">
                <div class="i-input-title">事故类型</div>
                <input class='i-input-input' type="text" v-model="claimInfo.F_CaseType" placeholder="请输入事故类型">
            </div> -->
            <i-cell title="事件描述" v-model="claimInfo.F_CaseContent"></i-cell>
            <!-- <i-cell title="就诊医院" v-model="claimInfo.F_Hospital"></i-cell> -->
            <!-- <div class="i-cell i-input">
                <div class="i-input-title">就诊医院</div>
                <input class='i-input-input' type="text" v-model="claimInfo.F_Hospital" placeholder="请输入就诊医院">
            </div> -->
        </div>

        <div class="content" v-if="planType==='T001'||planType==='T002'">
            <h3>事故判断：</h3>
            <div class="i-cell" @click="changeChecked(0)">
                <label>
                    <checkbox v-model="Accident[0].name" :checked="AccidentChecked[0]" :color="AccidentChecked[0]?color:''" class="i-checkbox-radio" />
                    <view class="i-checkbox-title">{{Accident[0].name}}</view>
                </label>
            </div>
            <div class="two-col">
                <div class="right">员工受伤</div>
                <div class="left">
                    <!-- <i-checkbox-group ygCurrent="ygCurrent" @change="handleYgChange">
                        <i-checkbox v-for="(item, index) in yuangong" position="left" :key="index" v-model="item.name">
                        </i-checkbox>
                    </i-checkbox-group> -->
                    <checkbox-group class="checkbox-group" @change="handleYgChange">
                        <div class="i-cell" v-for="(item, index) in yuangong" :key="index" v-if="item.isShow" @click="yuangongChecked(index)">
                            <label>
                                <checkbox v-model="item.name" :checked="item.checked" :color="item.checked?color:''" class="i-checkbox-radio" />
                                <view class="i-checkbox-title">{{item.name}}</view>
                            </label>
                        </div>
                        <!-- <label class="radio" wx:for="{{items}}">
                            <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
                        </label> -->
                    </checkbox-group>
                </div>
            </div>
            <div class="i-cell" @click="changeChecked(1)" v-if="Accident[1].isShow">
                <label>
                    <checkbox v-model="Accident[1].TitleCode" :checked="AccidentChecked[1]" :color="AccidentChecked[1]?color:''" class="i-checkbox-radio" />
                    <view class="i-checkbox-title">{{Accident[1].name}}</view>
                </label>
            </div>
            <div class="i-cell" @click="changeChecked(2)" v-if="btnset.IsSZ">
                <label>
                    <checkbox v-model="Accident[2].name" :checked="AccidentChecked[2]" :color="AccidentChecked[2]?color:''" class="i-checkbox-radio" />
                    <view class="i-checkbox-title">{{Accident[2].name}}</view>
                </label>
            </div>
            <div class="two-col" v-if="AccidentChecked[2]">
                <div class="right">造成第三方人身伤害</div>
                <div class="left">
                    <checkbox-group class="checkbox-group" @change="handleSfChange">
                        <div class="i-cell" v-for="(item, index) in sanfang" :key="index" v-if="item.isShow" @click="sanfangChecked(index)">
                            <label>
                                <checkbox v-model="item.TitleCode" :checked="item.checked" :color="item.checked?color:''" class="i-checkbox-radio" />
                                <view class="i-checkbox-title">{{item.name}}</view>
                            </label>
                        </div>
                    </checkbox-group>
                </div>
            </div>
            <div class="two-col" v-if="AccidentChecked[2]">
                <div class="right">造成第三方财产损失</div>
                <div class="left">
                    <checkbox-group class="checkbox-group" @change="handleSZCCChange">
                        <div class="i-cell" v-for="(item, index) in sanzecaichan" :key="index" v-if="item.isShow" @click="sanzecaichanChecked(index)">
                            <label>
                                <checkbox v-model="item.TitleCode" :checked="item.checked" :color="item.checked?color:''" class="i-checkbox-radio" />
                                <view class="i-checkbox-title">{{item.name}}</view>
                            </label>
                        </div>
                    </checkbox-group>
                </div>
            </div>
        </div>

        <div class="content" v-else>
            <i-cell title="出险类型:" class="cell-item content-item">
                <view slot="footer">
                    <radio-group class="footer col3" @change="riskTypeChange">
                        <view class="radio-item">
                            <radio class="i-radio" color='#2d8cf0' v-model="riskType1"></radio>
                            <view class="i-radio-title">意外</view>
                        </view>
                        <view class="radio-item">
                            <radio class="i-radio" color='#2d8cf0' v-model="riskType2"></radio>
                            <view class="i-radio-title">疾病</view>
                        </view>
                        <view class="radio-item">
                            <radio class="i-radio" color='#2d8cf0' v-model="riskType3"></radio>
                            <view class="i-radio-title">生育</view>
                        </view>
                    </radio-group>
                </view>
            </i-cell>
            <i-cell title="交通事故:" class="cell-item content-item" v-if="btnset.IsJT">
                <view slot="footer">
                    <radio-group class="footer" @change="trafficAccidentChange">
                        <view class="radio-item">
                            <radio class="i-radio" color='#2d8cf0' v-model="trafficY"></radio>
                            <view class="i-radio-title">是</view>
                        </view>
                        <view class="radio-item">
                            <radio class="i-radio" color='#2d8cf0' v-model="trafficN" checked='true'></radio>
                            <view class="i-radio-title">否</view>
                        </view>
                    </radio-group>
                </view>
            </i-cell>
            <div class="i-cell cell-item content-item">
                <div class="i-input-title">种类</div>
            </div>
            <div class="type-content">
                <checkbox-group class="checkbox-group" @change="handleTypeChange">
                    <div class="type-item" :class="{'active': item.checked}" v-for="(item, index) in type" :key="index" v-if="item.isShow" @click="typeChecked(index)">
                        <label>
                            <checkbox v-model="item.TitleCode" :checked="item.checked" class="i-checkbox-radio" />
                            <view class="i-checkbox-title">{{item.name}}</view>
                        </label>
                    </div>
                </checkbox-group>
            </div>
        </div>
        <buttomBtn title="下一步" @handleClick='_updateDescription'></buttomBtn>
    </div>
  </div>
</template>

<script>
import buttomBtn from '@/components/Bbutton'
import { getCaseInfo, updateDescription, claimset } from 'api/api'
export default {
    data () {
        return {
            yuangong: [
                {
                    id: 1,
                    name: '门急诊',
                    checked: false,
                    isShow: true,
                    pyName: 'IsMJZ',
                    TitleCode: '门急诊'
                }, {
                    id: 2,
                    name: '住院',
                    checked: false,
                    isShow: true,
                    pyName: 'IsZY',
                    TitleCode: '住院'
                }, {
                    id: 3,
                    name: '伤残',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSC',
                    TitleCode: '伤残'
                }, {
                    id: 4,
                    name: '死亡',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSW',
                    TitleCode: '死亡'
                }
            ],
            sanfang: [
                {
                    id: 1,
                    name: '门急诊',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZMJZ',
                    TitleCode: '三责门急诊'
                }, {
                    id: 2,
                    name: '住院',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZZY',
                    TitleCode: '三责住院'
                }, {
                    id: 3,
                    name: '伤残',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZSC',
                    TitleCode: '三责伤残'
                }, {
                    id: 4,
                    name: '死亡',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZSW',
                    TitleCode: '三责死亡'
                }
            ],
            sanzecaichan: [
                {
                    id: 1,
                    name: '车损',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZCS',
                    TitleCode: '三责车损'
                }, {
                    id: 2,
                    name: '物损',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSZWS',
                    TitleCode: '三责物损'
                }
            ],
            type: [
                {
                    id: 1,
                    name: '身故',
                    checked: false,
                    isShow: true,
                    pyName: 'IsYWSG',
                    TitleCode: '身故'
                }, {
                    id: 2,
                    name: '伤残',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSC',
                    TitleCode: '伤残'
                }, {
                    id: 3,
                    name: '门急诊',
                    checked: false,
                    isShow: true,
                    pyName: 'IsMJZ',
                    TitleCode: '门急诊'
                }, {
                    id: 4,
                    name: '住院',
                    checked: false,
                    isShow: true,
                    pyName: 'IsZY',
                    TitleCode: '住院'
                }, {
                    id: 5,
                    name: '重大疾病',
                    checked: false,
                    isShow: true,
                    pyName: 'IsZDJB',
                    TitleCode: '重大疾病'
                }
            ],
            ygCurrent: [],
            sfCurrent: [],
            szccCurrent: [],
            typeCurrent: [],
            AccidentChecked: [false, false, false],
            Accident: [
                {
                    name: '发生交通事故',
                    TitleCode: '交通事故',
                    checked: false
                },
                {
                    name: '有第三方给员工赔付',
                    TitleCode: '三方赔付',
                    checked: false,
                    isShow: true,
                    pyName: 'IsSFPF'
                },
                {
                    name: '造成第三方人身伤害或财产损失',
                    TitleCode: '交通事故',
                    checked: false
                }
            ],
            color: '#2d8cf0',
            claimInfo: {},
            claimset: [],
            btnset: [],
            EmpName: '', // 出险人
            planType: 'T001',
            // t003||t004数据
            trafficY: true,
            trafficN: false,
            currentTrafficAccident: false,
            riskType1: '意外',
            riskType2: '疾病',
            riskType3: '生育',
            currentRiskType: null
        }
    },

    components: {
        buttomBtn
    },

    methods: {
        changeChecked (index) {
            this.AccidentChecked.splice(index, 1, !this.AccidentChecked[index])
            console.log(this.AccidentChecked[index])
        },
        handleYgChange (e) {
            console.log(e)
            this.ygCurrent = e.mp.detail.value
            // this.yuangong.forEach((item, index) => {
            //     item.checked = item.name === e.mp.detail.value[0]
            // })
        },
        handleSfChange (e) {
            this.sfCurrent = e.mp.detail.value
        },
        handleSZCCChange (e) {
            this.szccCurrent = e.mp.detail.value
        },
        handleTypeChange (e) {
            this.typeCurrent = e.mp.detail.value
        },
        yuangongChecked (index) {
            this.yuangong[index].checked = !this.yuangong[index].checked
        },
        sanfangChecked (index) {
            this.sanfang[index].checked = !this.sanfang[index].checked
        },
        sanzecaichanChecked (index) {
            this.sanzecaichan[index].checked = !this.sanzecaichan[index].checked
        },
        typeChecked (index) {
            this.type[index].checked = !this.type[index].checked
        },
        _getCaseInfo () {
            getCaseInfo(this.$store.state.claim.claim.CaseId)
                .then((res) => {
                    console.log(res)
                    res.data.F_CaseDate = res.data.F_CaseDate.replace('T00:00:00', ' ').replace('T', ' ')
                    this.claimInfo = res.data
                })
        },
        _claimset () {
            claimset(this.$store.state.claim.claim.F_MainId)
                .then(res => {
                    console.log(res)
                    // 测试
                    // let tempBtn = res.data.btnset
                    // Object.keys(tempBtn).forEach(item => {
                    //     tempBtn[item] = !tempBtn[item]
                    // })
                    this.btnset = res.data.btnset
                    this.Accident[1].isShow = this.btnset.IsSFPF
                    if (this.planType === 'T001' || this.planType === 'T002') {
                        this.yuangong.forEach(item => {
                            item.isShow = this.btnset[item.pyName]
                        })
                        this.sanfang.forEach(item => {
                            item.isShow = this.btnset[item.pyName]
                        })
                        this.sanzecaichan.forEach(item => {
                            item.isShow = this.btnset[item.pyName]
                        })
                    } else {
                        this.type.forEach(item => {
                            item.isShow = this.btnset[item.pyName]
                        })
                    }
                    this.claimset = res.data.claimset
                })
        },
        getClaimTitleList (arr) {
            console.log(arr)
            let lstClaims = []
            arr.forEach((item) => {
                this.claimset.forEach((item2) => {
                    if (item === item2.TitleCode) {
                        lstClaims = lstClaims.concat(item2.lstClaims)
                    }
                })
            })
            console.log(lstClaims)
            let claimList = []
            let claimTitleId = []
            lstClaims.forEach(item => {
                item.Claim = []
                if (this.AccidentChecked[0] && item.F_Title === '病假单原件') {
                    item.F_Title = '病假单复印件'
                }
                if (this.AccidentChecked[1] && item.F_Title === '医疗发票原件') {
                    item.F_Title = '医疗发票复印件'
                }
                if (claimTitleId.includes(item.F_Id)) {

                } else {
                    claimTitleId.push(item.F_Id)
                    claimList.push(item)
                }
            })
            console.log(claimList)
            this.$store.commit('claim/SETCLAIMLIST', claimList)
            this.$store.commit('claim/SETINTOTYPELIST', 'new')
        },
        _updateDescription () {
            // if (!this.claimInfo.F_CaseType) {
            //     wx.showToast({
            //         title: '请填写事故类型',
            //         icon: 'none',
            //         duration: 2000
            //     })
            //     return
            // }
            // if (!this.claimInfo.F_Hospital) {
            //     wx.showToast({
            //         title: '请填写就诊医院',
            //         icon: 'none',
            //         duration: 2000
            //     })
            //     return
            // }
            if (this.AccidentChecked[1]) {
                wx.showModal({
                    title: '提示',
                    content: '由于存在第三赔付,提交纸质材料时提供复印件即可',
                    success (res) {
                        if (res.confirm) {
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                })
            }
            let temp = []
            let descriptionArr = []
            if (this.planType === 'T001' || this.planType === 'T002') {
                if (this.AccidentChecked[0]) {
                    temp.push('交通事故')
                }
                this.AccidentChecked.forEach((item, index) => {
                    if (item) {
                        temp.push(this.Accident[index].TitleCode)
                        descriptionArr.push(this.Accident[index].TitleCode)
                    }
                })
                this.ygCurrent.forEach((item) => {
                    if (item) {
                        temp.push(item)
                        descriptionArr.push('员工受伤' + item)
                    }
                })
                this.sfCurrent.forEach((item) => {
                    if (item) {
                        temp.push(item)
                        descriptionArr.push('造成第三方人身伤害' + item)
                    }
                })
                this.szccCurrent.forEach((item) => {
                    if (item) {
                        temp.push(item)
                        descriptionArr.push('造成第三方财产损失' + item)
                    }
                })
            } else {
                if (this.currentTrafficAccident) {
                    temp.push('交通事故')
                    descriptionArr.push('交通事故')
                }
                if (this.currentRiskType) {
                    descriptionArr.push(this.currentRiskType)
                } else if (this.currentRiskType === '生育') {
                    temp.push('女性医疗')
                }
                this.typeCurrent.forEach((item) => {
                    if (item) {
                        if (item === '身故' && this.currentRiskType === '意外') {
                            temp.push('意外身故')
                        } else if (item === '身故' && this.currentRiskType === '疾病') {
                            temp.push('疾病身故')
                        } else {
                            temp.push(item)
                        }
                        descriptionArr.push(item)
                    }
                })
            }
            this.getClaimTitleList(temp)
            let description = descriptionArr.join(',')
            updateDescription(description, this.$store.state.claim.claim.CaseId, this.claimInfo.F_CaseType, this.claimInfo.F_Hospital)
                .then((res) => {
                    console.log(res)
                    const url = '../claim/sureList'
                    wx.navigateTo({ url })
                })
        },
        trafficAccidentChange (e) {
            this.currentTrafficAccident = e.mp.detail.value
        },
        riskTypeChange (e) {
            this.currentRiskType = e.mp.detail.value
        }
    },

    async onShow () {
        this.EmpName = this.$store.state.claim.claim.F_EmpName
        this.planType = this.$store.state.claim.claim.F_PlanType
        console.log(this.$store.state.claim.claim)
        await this._getCaseInfo()
        await this._claimset()
    }
}
</script>

<style lang='stylus' scoped>
.sure-accident-type
    width 750rpx
    .content
        margin-top 15rpx
        width 100%
        box-sizing border-box
        background #ffffff
        padding 0 36rpx 0 40rpx
        h3
            font-size 28rpx
            color #000
            height 100rpx
            line-height 100rpx
            margin-left 10rpx
            border-bottom 1rpx solid #efefef
        .two-col
            display flex
            border-bottom 1rpx solid #efefef
            .right
                flex 1
                display flex
                justify-content:center
                align-items center
            .left
                border-left 1rpx solid #efefef
                width 280rpx
    .i-cell
        border-bottom: 1rpx solid #efefef
        position: relative
        padding: 12px 15px
        display: flex
        background: #fff
        align-items: center
        line-height: 1.4
        font-size: 14px
        overflow: hidden
        &:after
            content: ''
            position: absolute
            top: 0
            left: 0
            width: 200%
            height: 200%
            transform: scale(.5)
            transform-origin: 0 0
            pointer-events: none
            box-sizing: border-box
            border: 0 solid #e9eaec
            border-bottom-width: 1px
            left: 15px
            right: 0
        .i-checkbox-radio
            vertical-align:middle
        .i-checkbox-title
            display:inline-block
            vertical-align:middle
    .cell-item
        display flex
        width 100%
        .footer
            display flex
            width 460rpx
            padding-left 15rpx
            .radio-item
                margin-right: 45rpx
        .footer.col3
            justify-content space-around
            .radio-item
                margin-right 0
    .i-radio
        vertical-align: middle
    .i-radio-title
        display: inline-block
        vertical-align: middle
        color: #000
    .i-input-input
        text-align right
    .type-content
        .checkbox-group
            display: flex
            flex-wrap: wrap
            width 100%
            padding-bottom:20rpx
            .type-item
                width: 33%
                &.active
                    label
                        border 1rpx solid #077DFE
                        color #077DFE
                label
                    border 1rpx solid #efefef
                    display inline-block
                    padding:15rpx 15rpx
                    width:80%
                    margin:20rpx 0 0
                    text-align:center
                    ._checkbox
                        display none


</style>
